<template>
  <div class="emp-box">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/loginRedirect' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>通用审批</el-breadcrumb-item>
      <el-breadcrumb-item>报销申请</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="padding: 50px 150px 30px 150px">
      <el-form :model="submitForm" ref="subForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="报销标题">
          <el-input v-model="submitForm.submitTitle" maxlength="15" placeholder="请输入报销标题" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="报销金额">
          <el-input v-model="submitForm.submitMoney" autocomplete="off" placeholder="请输入金额（数值型金额）"></el-input>
        </el-form-item>
        <el-form-item label="报销时间">
          <div style="display: inline-block; width: 600px; line-heigth: 30px">
            <div style="display: inline-block">
              <el-date-picker
                v-model="submitForm.submitDate"
                type="datetime"
                placeholder="报销时间"
                style="width: 100%"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                disabled
              ></el-date-picker>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="报销类型">
          <el-radio-group v-model="submitForm.typeId">
            <el-radio v-for="(item,index) in typeData" :label="item.typeId" :key="index">{{item.typeName}}</el-radio>
            <el-radio v-if="typeData === null" label="1">其他报销</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="补充说明">
          <el-input type="textarea" :rows="5" placeholder="请输入说明..." v-model="submitForm.submitDetail"></el-input>
        </el-form-item>
        <el-form-item label="上传报销凭证(必填):">                      
          <el-upload 
          action=""
          class="upload-demo" 
          :before-upload="beforeAvatarUpload"
          :on-error="handleAvatarSuccess">
                <el-button size="mini" type="primary">选择图片</el-button><br>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                <img v-if="picFile" :src="imageUrl" width="150" height="120" alt="暂无选择图片">
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="上传报销凭证">
          <input type="file" @change="setSubmitImg" id="submitImg" name="submitImg1" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="submitApply('subForm')">提 交 申 请</el-button>
          <el-button type="warning" @click="resetData('subForm')">清 空</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeData:[],
      submitForm:{
        submitTitle:"",
        submitDate: this.formatDate(),
        typeId:"",
        submitDetail:"",
        submitMoney:"",
      },
      picFile:"",
      imageUrl:"",
    };
  },
  created(){
    this.getSubmitType();
  },
  methods: {
    //获取报销类型
    getSubmitType(){
      this.$http.get("/approval/getSubmitType").then((res)=>{
        if(res.code === 200){
          this.typeData = res.data;
        }else{
          this.$message.error("获取请假类型失败!!!");
        }
      }).catch((err)=>{
        this.$message.error("获取请假类型失败!!!");
      });
    },
    // 选择
    beforeAvatarUpload(event){
          this.picFile=event;
          // this.picObject.imgId=event.uid;
          // this.picObject.imgName=event.name;
          // console.log(this.picFile);
    },
    // 显示图片
    handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 取消上传
    cancleUpload(){
          this.picFile="";
          this.imageUrl="";
    },
    //提交
    submitApply(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          let st = this.submitForm.submitTitle === "" || this.submitForm.submitMoney === "";
          let st1 = this.submitForm.submitDetail === "" || this.submitForm.typeId === "";
          if(st || st1){
            return this.$message.warning("有必填项为空,请全部填写!!!");
          }
          //任意正整数，正小数（小数位不超过2位）
          var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
          if(!isNum.test(this.submitForm.submitMoney)){
            return this.$message.warning("请输入正确格式的金额!!!");
          }
          if(this.picFile === "" || this.picFile ===null){
                 return this.$message.warning("请上传报销凭证额!!!");
          }
          //获取表单数据
          let formData = new FormData();
                let re = this.submitForm;//图片对象
                Object.keys(re).forEach((key) => {
                formData.append(key, re[key]);
                });
                formData.append("submitImg", this.picFile);
          this.$http.post("/approval/expenseSubmitApply", formData,{
            headers: {
              'content-type': 'multipart/form-data'
            }
          }).then((res)=>{
            // console.log(res);
            if(res.code === 200 && res.data){
              this.$message.success("申请成功!!!");
              this.submitForm = {};
              this.cancleUpload();
              this.submitForm.submitDate = new Date();
            }else{
              this.$message.error("提交报销申请失败!!!");
            }
          }).catch((err)=>{
            this.$message.error("提交报销申请失败!!!");
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetData(form){
      this.$refs[form].resetFields();
    },
    //上传
    setSubmitImg(event){
      //使用type=file
      this.imgFile = event.target.files[0];
      // this.submitForm.submitImg = event.target.files[0];
    },
    formatDate(){
      var date = new Date()
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
      h = h < 10 ? ('0' + h) : h
      var mon = date.getMinutes();
      mon = mon < 10 ? ('0'+mon) : mon
      var sec = date.getSeconds();
      sec = sec < 10 ? ('0'+sec) : sec;
      const time = y + '-' + m + '-' + d + ' ' +h + ':' + mon + ':' +sec;
      return time;
    }
  }
};
</script>

<style scoped>
.emp-box .search-box {
  width: 30%;
  margin-top: 20px;
}
</style>
